<template>
  <div class="search-result-container">
    <div class="search-result result-group" v-if="searchResult">
      <!-- 联系人 -->
      <SearchResultItem :searchType="1"></SearchResultItem>

      <!-- 群聊 -->
      <SearchResultItem :searchType="2"></SearchResultItem>

      <!-- 聊天记录 -->
      <SearchResultItem :searchType="3"></SearchResultItem>
    </div>

    <!-- 默认的内容 -->
    <div
      v-if="keyword && !errMessage"
      class="default-search result-group"
      ref="defaultSearchRef"
      v-click-outside="onClickOutside"
    >
      <span
        class="iconfont icon-xindepengyou"
        style="font-size: 35px; color: #07c160"
      ></span>

      <div
        :class="['default-content', 'text-ellipsis']"
        @click="searchContactResult"
      >
        <template v-if="addContact">
          <div style="height: 100%; width: 100%" class="text-ellipsis">
            搜索：<span class="highlight">{{ keyword }}</span>
          </div>
        </template>

        <template v-else> 网络查找手机/QQ号</template>
      </div>

      <div
        class="iconfont icon-youjiantou-copy"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          color: #b7b7b7;
        "
      ></div>
    </div>

    <el-popover
      ref="popoverRef"
      :virtual-ref="defaultSearchRef"
      :width="280"
      placement="right-start"
      trigger="manual"
      transition="none"
      :hide-after="0"
      virtual-triggering
      :show-arrow="false"
      :offset="0"
      :visible="popoverVisable"
    >
      <template #default>
        <div class="popover-user-panel no-drag">
          <UserInfo :user-profile="userProfile"></UserInfo>
        </div>
      </template>
    </el-popover>

    <div v-if="errMessage" class="search-error">
      <span> {{ errMessage }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, unref, watch } from 'vue';
import SearchResultItem from '@/components/search/SearchResultItem.vue';
import { searchContact } from '@/api/search';
import { getUserInfo } from '@/api/user';
import UserInfo from '../user/UserInfo.vue';
import { ClickOutside as vClickOutside } from 'element-plus';

const defaultSearchRef = ref(null);
const popoverRef = ref();
const searchResult = ref(null);
const popoverVisable = ref(false);
const errMessage = ref('');

const userProfile = ref<any>({
  uid: 0,
  username: '',
  nickname: '',
  gender: 0,
  loginNumber: '',
  region: '',
  avatar: '',
  isCollected: false,
  remark: '',
  coGroupNumber: 2,
  signature: '',
  source: 1,
  contactStatus: 1,
});

const props = defineProps({
  keyword: {
    type: String,
    default: '',
  },
  addContact: {
    type: Boolean,
    default: false,
  },
});

watch(
  () => props.keyword,
  () => {
    errMessage.value = '';
  }
);

const onClickOutside = () => {
  popoverVisable.value = false;
  unref(popoverRef).popperRef?.delayHide?.();
};

/**
 * 搜索联系人
 */
const searchContactResult = async () => {
  try {
    const result: any = await searchContact({
      keyword: props.keyword.trim(),
    });
    // 存储错误信息
    if (result.errCode) {
      errMessage.value = result.message;
      return;
    }

    // 获取用户信息
    const uid = result.data.uid;
    const userInfoRes: any = await getUserInfo(uid);
    if (userInfoRes.errCode) {
      return;
    }

    userProfile.value = userInfoRes.data;
    popoverVisable.value = true;
  } catch (err) {}
};
</script>

<style scoped lang="scss">
.search-result-container {
  width: 100%;
  height: 100%;

  .default-search {
    height: 60px;
    width: 100%;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    padding: 13px;

    &:hover {
      background-color: #eaeaea;
    }

    .default-content {
      margin-left: 13px;
      font-size: 13px;
      height: 100%;
      flex: 1;
      line-height: 35px;

      // 高亮样式
      .highlight {
        color: #07c160; // 高亮文字颜色
        font-weight: bold; // 加粗
      }
    }
  }

  .result-group:not(:first-child) {
    margin-top: 10px;
  }

  .search-error {
    width: 100%;
    height: 60px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      height: 100%;
      width: 100%;
      font-size: 14px;
      color: #999999;
      padding: 0 15px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
